<template>
  <div>
    <div class="m-main">
      <div class="m-img">
        <img src="../../../static/images/redianzhengcebanner.png" alt="">
      </div>
      <div class="container main">
        <div class="m-content">
          <div class="c-title">金融创新产品</div>
          <div class="c-list">
            <el-row :gutter="20">
              <el-col :span="8" ><div class="grid-content bg-purple" @click="go_page">
             <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div ></el-col>
              <el-col :span="8" @click="go_page"><div class="grid-content bg-purple">
                <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div></el-col>
              <el-col :span="8" @click="go_page"><div class="grid-content bg-purple">
                <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div></el-col>
              <el-col :span="8" @click="go_page"><div class="grid-content bg-purple">
                <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div></el-col>
              <el-col :span="8" @click="go_page"><div class="grid-content bg-purple">
                <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div></el-col>
              <el-col :span="8" @click="go_page"><div class="grid-content bg-purple">
                <div class="m-img"><img src="../../../static/images/hd_p1.png"></div>
                <div>
                  <div>我易贷</div>
                  <div>合作银行：  4家</div>
                  <div>企业定位：科技型中小企业</div>
                </div>
              </div></el-col>

            </el-row>
            <div class="list-totle">共6条记录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
      }
    },
    methods: {
      go_page(){

        this.$router.push({path: '/FinanceCloud/HotPolityDetail'})
      }
    },

  }
</script>
<style lang="less" scoped>
  .m-main{
    font-family:MicrosoftYaHei;
    font-weight:400;
    color: #333;
    .m-img{
      width: 100%;
      img{
        width: 100%;
      }
    }
    .m-content{
      padding: 80px 0 100px;
      .c-title{
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        font-size:24px;
        color: #1575F9;
        border-bottom: 2px solid #1575F9;
        position: relative;
        &::before{
          content: '';
          width:0;
          height:0;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-left:10px solid #1575F9;
          position: absolute;
          left: 0;
          top: 21px;
        }
      }
      .c-list{
        padding: 60px 30px;
        .grid-content{
          display: flex;
          justify-content: center;
          padding: 20px;
          align-items: center;
          margin-bottom: 20px;
          .m-img{
            width: 100px;
            height: 100px;
            border-radius:50%;
            margin-right: 15px;
            img{

              width: 100%;
              border-radius:50%;
              height:100px;
            }
          }

        }
        .bg-purple{
        border: 1px solid silver;
          background:rgba(254,254,254,1);
          border-radius:10px;
        }
        .list-totle{
          text-align: center;
          font-size: 18px;
          color: #999999;
          margin-top: 80px;
        }
      }
    }
  }
</style>
